@import "include/vars";
@import "include/mixins";

// Scroll prevention
body.redeviation-bs-noscroll {
  overflow: hidden !important;
}

// Indicator
body > div#redeviation-bs-indicator {

  > div {
    position: absolute;
    transform: translate3d(-$__indicatorWidth, 0, 0);
    top: 0;
    left: 0;
    width: $__indicatorWidth !important;
    height: 100%;
    background: $__indicatorColor;
    border-radius: 0 10px 10px 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2;
    @extend %hidden;

    > span {
      -webkit-mask: no-repeat center / $__indicatorIconSize;
      @include maskImage('icon-bookmark');
      background-color: $__indicatorIconColor;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &[data-pos='right'] {
    left: auto;
    right: 0;

    > div {
      transform: translate3d($__indicatorWidth, 0, 0);
      left: auto;
      right: 0;
      border-radius: 10px 0 0 10px;
    }
  }

  &.redeviation-bs-fullHeight {

    > div {
      border-radius: 0;
    }
  }

  &.redeviation-bs-hover {

    > div {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  &[data-pos='left'].redeviation-bs-has-lsb {
    height: 100% !important;
    top: 0 !important;

    > div {
      background: transparent;

      > span {
        -webkit-mask-position-y: 20px;
      }
    }
  }
}

// Sidebar
body > #redeviation-bs-sidebar {
  width: $__sidebarWidth;
  max-width: none;
  height: 0;
  z-index: #{2147483647 - 1};
  background-color: $__sidebarMaskColor !important;
  color-scheme: normal !important;
  speak: none;
  border: none;
  display: block !important;
  transform: translate3d(-$__sidebarWidth, 0, 0);
  transition: width 0s 0.3s, height 0s 0.3s, opacity 0.3s, transform 0.3s;

  &[data-pos='right'] {
    left: auto;
    right: 0;
    transform: translate3d($__sidebarWidth, 0, 0);
  }

  &.redeviation-bs-visible {
    @extend %visible;
    width: calc(100% + #{$__sidebarWidth});
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s, transform 0.3s;
  }

  &.redeviation-bs-hideMask {
    background: none !important;

    &:not(.redeviation-bs-hover) {
      width: calc(#{$__sidebarWidth} + 50px);
    }
  }
}

// Overlay
body > #redeviation-bs-overlay {
  width: 100%;
  max-width: none;
  height: 100%;
  z-index: 2147483647;
  border: none;
  speak: none;
  background: $__overlayMaskColor !important;
  transition: opacity 0.3s;

  &.redeviation-bs-visible {
    @extend %visible;
  }
}